<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>订单详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.css"/>
		<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="css/order_details.css"/>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav">
			<a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">订单详情</h1>
		</header>

		<div class="mui-content content id">
			<div class="mui-card">
				<!--页眉，放置标题-->
				<div class="mui-card-header">
					单号：1548307644
				</div>
				<!--内容区-->
				<div class="mui-card-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<div>
								<img class="mui-media-object mui-pull-left" src="img/1548171278a.jpg">
								<div class="mui-media-body">
									<p class="mui-ellipsis-2">Mistine维他命E梦幻变色润唇膏泰国小草莓唇膏保湿滋润</p>
									<div class="right-content">
										<p>￥ 26.00</p>
										<em>×1</em>
									</div>
								</div>
							</div>
						</li>
					</ul>
			
				</div>
				<!--页脚，放置补充信息或支持的操作-->
				<div class="mui-card-footer">
					<div></div>
					<div>共 <span>1</span> 件商品&nbsp;&nbsp;&nbsp;合计：<span>￥26.00</span></div>
				</div>
				<!--填写物流-->
				<form class="mui-input-group" action="" method="post">
					<div>物流信息</div>
				    <div class="mui-input-row">
				        <label>选择物流</label>
				        <input type="text" class="mui-input-clear" id="logistics" value="顺丰" placeholder="请点击选择物流公司">
				        <input type="hidden" name="kuai" id="kuai" value="1" />
				    </div>
				    <div class="mui-input-row">
				        <label>订单编号</label>
				        <input type="number" name="" placeholder="请输入订单编号">
				    </div>
				    <div class="mui-input-row">
				    	<button type="button" id="sub" class="mui-btn mui-btn-blue mui-btn-block">发货</button>
				    </div>
				</form>
			</div>
			
		</div>

		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init()
			let logistics = [
				{value:1,text:'顺丰'},
				{value:2,text:'申通'},
				{value:3,text:'中通'},
				{value:4,text:'邮政'},
				{value:5,text:'邮政EMS'},
				{value:6,text:'韵达'},
				{value:7,text:'天天'},
				{value:8,text:'圆通'},
				{value:9,text:'百事汇通'},
				{value:10,text:'德邦'}
			]
			var picker = new mui.PopPicker();
			picker.setData(logistics);
			document.getElementById('logistics').addEventListener('tap',e=>{
				let _this = $(e.target)
				picker.show(item=>{
					$('#kuai').val(item[0].value)
					_this.val(item[0].text)
				})
 			 })
			
			$('#sub').click(()=>{
				if($('input[type="number"]').val()==''){
					mui.toast('请输入运单号')
					return false
				}
				$('form').submit()
			})
			
		</script>
	</body>

</html>